<!-- Dom模板 -->
<template>
  <div
    class="Bookbox"
    ref="waiceng"
  >
    <div class="Book_move" ref="neiceng">
      <div class="BookCircle">
        <div class="BoockHeard">
          <h3>圈子</h3>
        </div>
        <div class="BookCircleMain">
          <div
            class="BookCircleMainContent"
            ref="content"
          >
            <div
              ref="con"
              v-for="(item, index) in $store.state.social.circleData"
              :key="index"
              class='BookCircleMain_con'
            >
              <div class="img">
                <img :src="item.user_img" alt="" />
              </div>
              <div class="type">{{ item.circle_modelname }}</div>
              <div class="fans">3862.1w圈友</div>
              <div class="att" @click="contact(item, index)">
                {{$store.state.login.loginuserMsg.circle=== undefined?'关注':($store.state.login.loginuserMsg.circle.cont.findIndex(ite=>item.circle_modelname===ite.circle_modelname)===-1?'关注':'已关注') }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="soundLiver">
        <div class="soundLiverHeader">
          <h3>声控主播</h3>
        </div>
        <div class="soundLiverMain">
          <div class="soundLiverCon" v-for="(item, index) in 7" :key="index">
            <div class="soundLiverImg">
              <img src="../../../static/img/v2_qsu2e8.png" alt="" />
            </div>
            <div class="soundWorks">
              <p class="works">代表作品</p>
              <p>《太子妃完蛋了》</p>
              <p>《哑巴学霸》</p>
            </div>
            <div class="soundName">新乡一诺</div>
            <div class="soundFans">
              <span>32.5万粉</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import mixins from "./socialMixin.js";
import { Toast } from "vant";
export default {
  name: "",
  // mixins: [mixins],
  data() {
    return {
      msg: "测试",
      widths: 100,
      arr: [],
      timer: null,
      flag: true,
      flags: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$store.dispatch("social/getCircleType");
    
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log(this.$store.state.login.loginuserMsg.circle)
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  // Vue方法定义
  methods: {
    contact(item) {
      if (sessionStorage.getItem("userId")) {
        this.arr.push(item.circle_modelname);
        this.$store
          .dispatch("social/circleContact", {
            type: "add",
            from_userid: sessionStorage.getItem("userId"),
            to_circle_modelid: item.circle_modelid,
          })
          .then((res) => {
            console.log(res);
            this.$store.dispatch("login/getUser", {
              userid: sessionStorage.getItem("userId"),
            }).then(res=>{
              console.log(res)
            })
          });
      } else {
        Toast("请先登录");
      }
    },
  },
  computed: {
    
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
::-webkit-scrollbar {
  display: none;
}
.Bookbox {
  width: 100vw;
  height: calc(100vh - 4.08rem);
  overflow-y: auto;
  padding-bottom: 0.133333rem;
}

.BookCircle {
  width: 94%;
  height: 5.84rem;
  line-height: 0.533333rem;
  border-radius: 0 0 0.266667rem 0.266667rem;
  text-align: center;
  box-shadow: 0 0.053333rem 0.506667rem 0 rgba(0, 0, 0, 0.08);
  background: white;
  margin: 0 auto;
  margin-bottom: 0.266667rem;
}
.BoockHeard {
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  margin: 0 auto;
}
.BoockHeard div {
  font-size: 0.373333rem;
}
h3 {
  font-size: 0.48rem;
}
.BookCircleMainContent {
  /* min-width: 2.666667rem; */
  width: 120%;
  /* float: left; */
  height: 3.866667rem;
  box-sizing: border-box;
  /* padding: 0 .266667rem; */
  /* overflow: hidden; */
  /* display: flex; */
}
.BookCircleMain {
  width: 95%;
  height: 3.866667rem;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y:hidden;
}

.BookCircleMain_con {
  width: 2.32rem;
  height: 3.866667rem;
  line-height: 0.533333rem;
  border-radius: 0.106667rem;
  text-align: center;
  border: 1px solid rgba(215, 215, 215, 100);
  float: left;
  margin: 0 0.16rem;
}
.nomore {
  width: 88%;
  height: 100%;
  text-align: center;
  line-height: 4.213333rem;
}
.view {
  /* width: 2.32rem;
  height: 3.866667rem;
  line-height: 0.533333rem;
  border-radius: 0.106667rem;
  text-align: center;
  border: 1px solid rgba(215, 215, 215, 100);
  float: left;
  margin: 0 0.16rem;
  transition: all 1s ; */
  transform: scale(0) rotate(720deg);
}
.img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  margin: 0.293333rem auto;
  overflow: hidden;
}
.img img {
  width: 100%;
  height: 100%;
}
.type {
  width: 1.733333rem;
  height: 0.613333rem;
  color: rgba(16, 16, 16, 100);
  font-size: 0.426667rem;
  text-align: center;
  font-family: "PingFangSC-regular";
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
}
.fans {
  width: 100%;
  height: 0.426667rem;
  color: rgba(169, 169, 169, 100);
  font-size: 0.266667rem;
  text-align: center;
  font-family: "PingFangSC-regular";
}
.att {
  width: 1.386667rem;
  height: 0.613333rem;
  line-height: 0.533333rem;
  border-radius: 0.72rem;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  border: 1px solid rgba(243, 58, 101, 100);
  margin: 0.133333rem auto;
  color: rgba(243, 58, 101, 100);
}
.soundLiver {
  width: 94%;
  box-shadow: 0px 2px 19px 0px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin: 0 auto;
}
.soundLiverCon {
  width: 3.92rem;
  height: 5.946667rem;
  position: relative;
}

.soundLiverMain {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.35rem;
  background: white;
  justify-content: space-between;
}

.soundLiverHeader {
  display: flex;
  justify-content: space-between;
  width: 88%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  margin: 0 auto;
}
.soundLiverImg {
  width: 3.92rem;
  height: 3.92rem;
  border-radius: 0.106667rem;
  margin-bottom: 0.133333rem;
}
.soundLiverImg img {
  width: 100%;
  height: 100%;
}
.soundWorks {
  width: 100%;
  height: 1.866667rem;
}
.soundWorks p {
  font-size: 0.373333rem;
  margin-bottom: 0.08rem;
}
.soundWorks .works {
  color: rgba(126, 126, 126, 100);
  font-size: 0.373333rem;
  text-align: left;
  font-family: "PingFangSC-regular";
  margin-left: 0.213333rem;
}
.soundFans {
  width: 1.413333rem;
  height: 0.426667rem;
  color: white;
  background: red;
  border-radius: 999em;
  position: absolute;
  top: 0.213333rem;
  right: 0.213333rem;
  text-align: center;
  line-height: 0.426667rem;
}
.soundFans > span {
  display: inline-block;
  font-size: 0.32rem;
  transform: scale(0.8);
}
.soundName {
  position: absolute;
  color: white;
  bottom: 2.186667rem;
  left: 0.213333rem;
}
.zw {
  height: 5px;
}
</style>